// JavaScript Document
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var aImg = oUl.getElementsByTagName('img');
	
	var oBtn = document.getElementById('btn');
	var aA = oBtn.getElementsByTagName('a');
	
	var imgWidth = 1920;
	var iNow = 0;
	var iNow2 = 0;
	
	oUl.style.width = aImg.length * imgWidth + 'px';
	
	function toReSize(){
		
		var veiwWidth = document.documentElement.clientWidth;
		
		if(veiwWidth>1000){
			for(var i=0;i<aImg.length;i++){
				aImg[i].style.left = - (imgWidth - veiwWidth)/2 + 'px';
			}
		}
	
	}
	
	toReSize();
	
	window.onresize = function(){
		toReSize();
	};
	
	
	for(var i=0;i<aA.length;i++){
		aA[i].index = i;
		aA[i].onclick = function(){
		
			for(var i=0;i<aA.length;i++){
				aA[i].className = '';
			}
			this.className = 'active';
			
			startMove(oUl,{left : - this.index * imgWidth});
		
		};
	}
	
	
	setInterval(toRun,5000);
	
	function toRun(){
	
		if(iNow == aLi.length-1){
			aLi[0].style.position = 'relative';
			aLi[0].style.left = aLi.length * imgWidth + 'px';
			iNow = 0;
		}
		else{
			iNow++;
		}
		
		iNow2++;
		
		for(var i=0;i<aA.length;i++){
			aA[i].className = '';
		}
		
		aA[iNow].className = 'active';
		
		startMove(oUl,{left : - iNow2 * imgWidth},function(){
		
			if(iNow==0){
				aLi[0].style.position = 'static';
				oUl.style.left = 0;
				iNow2 = 0;
			}
		
		});
		
	}
	
};



function startMove(obj,json,endFn){
	
		clearInterval(obj.timer);
		
		obj.timer = setInterval(function(){
			
			var bBtn = true;
			
			for(var attr in json){
				
				var iCur = 0;
			
				if(attr == 'opacity'){
					if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
					
					}
					else{
						iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
					}	
				}
				else{
					iCur = parseInt(getStyle(obj,attr)) || 0;
				}
				
				var iSpeed = (json[attr] - iCur)/8;
			iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				if(iCur!=json[attr]){
					bBtn = false;
				}
				
				if(attr == 'opacity'){
					obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
					obj.style.opacity = (iCur + iSpeed)/100;
					
				}
				else{
					obj.style[attr] = iCur + iSpeed + 'px';
				}
				
				
			}
			
			if(bBtn){
				clearInterval(obj.timer);
				
				if(endFn){
					endFn.call(obj);
				}
			}
			
		},30);
	
	}
	
	
	function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}

	